<template>
  <div class="app-container">
    <!--    {{title}}-->
    <el-drawer :wrapperClosable="false" :close-on-press-escape="false" :title="title + '开户'" @closed="createClose"
      :visible.sync="open" size="65%" append-to-body>
      <el-form v-loading="loading" ref="form" :model="form" :rules="rules" label-width="110px" class="form">
        <el-row>
          <el-col :span="8">
            <el-form-item label="店铺账户" prop="shopId">
              <el-select @change="$forceUpdate()" filterable v-model="form.shopId" placeholder="请选择店铺账户" clearable
                style="width: 240px">
                <el-option v-for="item in shopList" :key="item.id" :label="item.nickName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="费率" prop="feeRate">
              <el-input-number :step="0.1" :min="0" :max="15" :precision="2" v-model.number="form.feeRate"
                placeholder="请输入费率" />
            </el-form-item>
          </el-col>
        </el-row>

        <!--        <el-row v-if="!(form.status === 1 || form.status === 4 || form.status === 7)">-->
        <!--          <el-col :span="8">-->
        <!--            <el-form-item label="二级商户号" prop="subMerchantId">-->
        <!--              <el-input v-model="form.subMerchantId" :maxlength="80" placeholder="请输入二级商户号" />-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--          <el-col :span="8">-->
        <!--            <el-form-item label="开户银行号" prop="accountNumber">-->
        <!--              <el-input v-model="form.accountNumber" :maxlength="80" placeholder="请输入开户银行号" />-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--          <el-col :span="7">-->
        <!--            <el-form-item label="状态" prop="subMerchantId">-->
        <!--              {{form.status===1?"待提交":form.status===2?"审核中":form.status===3?"审核通过":form.status===4?"审核驳回":form.status===5?"待签约":form.status===6?"签约中":form.status===7?"签约失败":form.status===8?"签约成功":form.status===9?"入网成功":""}}-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->
        <!--        </el-row>-->


        <el-divider content-position="left">资质信息</el-divider>
        <el-form-item label="商户类型" prop="registerRole">
          <el-select @change="handRegisterRoleChange" v-model="form.registerRole" placeholder="请选择商户类型" clearable
            style="width: 240px">
            <el-option label="企业" value="ENTERPRISE_LEGAL_PERSON" />
            <el-option label="个体户" value="INDIVIDUAL_BUSINESS" />
          </el-select>
        </el-form-item>
        <el-form-item label="营业执照" prop="businessLicenseImg">
          <PayEaseFileUpload @input="handUploadImg" keys="businessLicensePath" :path="form.businessLicensePath"
            :limit="1" v-model="form.businessLicenseImg"></PayEaseFileUpload>
        </el-form-item>

        <el-row>
          <el-col :span="8">
            <el-form-item label="门店门头照片" prop="storeHeaderImg">
              <PayEaseFileUpload @input="handUploadImg" keys="storeHeaderPath" :path="form.storeHeaderPath" :limit="1"
                v-model="form.storeHeaderImg"></PayEaseFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="店内场景照片" prop="storeIndoorImg">
              <PayEaseFileUpload @input="handUploadImg" keys="storeIndoorPath" :path="form.storeIndoorPath" :limit="1"
                v-model="form.storeIndoorImg"></PayEaseFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="其他资质" prop="otherCerImg">
              <PayEaseFileUpload :fileType="['zip']" type="zip" :fileSize="5" @input="handUploadImg" keys="otherCerPath"
                :path="form.otherCerPath" :limit="1" v-model="form.otherCerImg"></PayEaseFileUpload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="公司全称" prop="signedName">
              <name-input v-model="form.signedName" :maxlength="80" placeholder="请输入营业执照全称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="店铺名称" prop="signedShorthand">
              <name-input v-model="form.signedShorthand" :maxlength="20" placeholder="请输入店铺名称" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="社会统一信用代码" prop="cerNo" label-width="140px">
              <code-input v-model="form.cerNo" :maxlength="20" placeholder="请输入社会统一信用代码" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="业务分类" prop="businessClassification">
              <el-cascader v-model="form.businessClassification" :options="classificationList"
                :props="{ label: 'name', value: 'value' }" :show-all-levels="false"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-form-item label="省市区" prop="businessAddressProvince">
            <el-col :span="7">
              <el-form-item prop="businessAddressProvince">
                <el-select @change="handBusinessAddressProvince" v-model="form.businessAddressProvince"
                  placeholder="请选择省" clearable style="width: 100%">
                  <el-option v-for="item in businessAddressProvince" :key="item.code" :label="item.name"
                    :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div style="text-align: center">-</div>
            </el-col>
            <el-col :span="7">
              <el-form-item prop="businessAddressCity">
                <el-select @change="handBusinessAddressCity" v-model="form.businessAddressCity" placeholder="请选择市"
                  clearable style="width: 100%">
                  <el-option v-for="item in businessAddressCity" :key="item.code" :label="item.name"
                    :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div style="text-align: center">-</div>
            </el-col>
            <el-col :span="7">
              <el-form-item prop="businessAddressArea">
                <el-select @change="handBusinessAddressArea" v-model="form.businessAddressArea" placeholder="请选择县/区"
                  clearable style="width: 100%">
                  <el-option v-for="item in businessAddressArea" :key="item.code" :label="item.name"
                    :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="详细地址" prop="businessAddress">
              <el-input v-model="form.businessAddress" :maxlength="200" placeholder="请输入营业执照注册详细地址" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">银行信息</el-divider>

        <el-form-item label="结算类型" prop="accountType">
          <el-select @change="$forceUpdate()" v-model="form.accountType" placeholder="请选择结算类型" clearable
            style="width: 240px">
            <el-option label="对公" value="PUBLIC" />
            <el-option v-if="!form.registerRole || form.registerRole === 'INDIVIDUAL_BUSINESS'" label="对私"
              value="PRIVATE" />
          </el-select>
        </el-form-item>

        <el-row>
          <el-col :span="8" v-if="form.accountType === 'PUBLIC'">
            <el-form-item label="开户许可证" prop="openAccountImg">
              <PayEaseFileUpload :isShowTip="false" @input="handUploadImg" keys="openAccountPath"
                :path="form.openAccountPath" :limit="1" v-model="form.openAccountImg"></PayEaseFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-else-if="form.accountType === 'PRIVATE'">
            <el-form-item label-width="130px" label="法人银行卡照片" prop="legalPersonBankCardImg">
              <PayEaseFileUpload :isShowTip="false" @input="handUploadImg" keys="legalPersonBankCardPath"
                :path="form.legalPersonBankCardPath" :limit="1" v-model="form.legalPersonBankCardImg">
              </PayEaseFileUpload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item :label="form.accountType === 'PUBLIC' ? '账户名称' : '法人名字'" prop="accountName">
              <el-input v-model="form.accountName" :maxlength="80" placeholder="请输入开户人" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户行名称" prop="bankName">
              <el-input v-model="form.bankName" :maxlength="50" placeholder="请输入开户行名称" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="支行名称" prop="bankBranchName">
              <el-input v-model="form.bankBranchName" :maxlength="80" placeholder="请输入支行名称" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item :label="form.accountType === 'PUBLIC' ? '对公账号' : '法人银行卡号'" prop="bankCardNo">
              <code-input v-model="form.bankCardNo"
                :placeholder="form.accountType === 'PUBLIC' ? '请输入对公账号' : '请输入法人银行卡号'" :maxlength="80" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="银行省市区" prop="provinceCode">
            <el-col :span="11">
              <el-form-item prop="provinceCode">
                <el-select @change="handProvinceCode" v-model="form.provinceCode" placeholder="请选择省" clearable
                  style="width: 100%">
                  <el-option v-for="item in businessAddressProvince" :key="item.code" :label="item.name"
                    :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div style="text-align: center">-</div>
            </el-col>
            <el-col :span="11">
              <el-form-item prop="cityCode">
                <el-select @change="handCityCode" v-model="form.cityCode" placeholder="请选择市" clearable
                  style="width: 100%">
                  <el-option v-for="item in cityCode" :key="item.code" :label="item.name" :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-row>




        <el-divider content-position="left">法人信息</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="100px" label="身份证正面（人像面）" prop="legalIdCardProsImg">
              <PayEaseFileUpload @input="handUploadImg" keys="legalIdCardProsPath" :path="form.legalIdCardProsPath"
                :limit="1" v-model="form.legalIdCardProsImg"></PayEaseFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="100px" label="身份证反面（国徽面）" prop="legalIdCardConsImg">
              <PayEaseFileUpload @input="handUploadImg" keys="legalIdCardConsPath" :path="form.legalIdCardConsPath"
                :limit="1" v-model="form.legalIdCardConsImg"></PayEaseFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="100px" label="手持身份证" prop="holdingIdCardImg">
              <PayEaseFileUpload @input="handUploadImg" keys="holdingIdCardPath" :path="form.holdingIdCardPath"
                :limit="1" v-model="form.holdingIdCardImg"></PayEaseFileUpload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="法人姓名" prop="legalPersonName">
              <el-input v-model="form.legalPersonName" :maxlength="50" placeholder="请输入法人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="证件号码" prop="legalPersonIdNo">
              <code-input v-model="form.legalPersonIdNo" placeholder="请输入法人证件号码" :maxlength="20" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="法人手机号" prop="legalPersonPhone">
              <code-input v-model="form.legalPersonPhone" placeholder="请输入法人手机号" :maxlength="11" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系人邮箱" prop="contactEmail">
              <el-input v-model="form.contactEmail" placeholder="请输入联系人邮箱" :maxlength="100" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="法人职业" prop="profession">
              <el-select @change="$forceUpdate()" filterable v-model="form.profession" placeholder="请选择法人职业" clearable
                style="width: 240px">
                <el-option v-for="item in careerList" :key="item.id" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="证件日期" prop="idEffectiveDateStart">
            <el-col :span="11">
              <el-form-item prop="idEffectiveDateStart">
                <el-date-picker type="date" v-model="form.idEffectiveDateStart" placeholder="请选择法人证件有效期开始日期"
                  format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div style="text-align: center">-</div>
            </el-col>
            <el-col :span="11">
              <el-row :gutter="10">
                <el-col :span="22">
                  <!--                 :pickerOptions="{-->
                  <!--                 disabledDate(time) {-->
                  <!--                 return time.getTime() ;-->
                  <!--                 }-->
                  <!--                 }"-->
                  <el-form-item prop="idEffectiveDateEnd">
                    <el-date-picker type="date" :disabled="form.isLongTerm === 1" v-model="form.idEffectiveDateEnd"
                      placeholder="请选择法人证件有效期结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="1">
                  <el-checkbox :true-label="1" :false-label="0" @change="handLongTerm"
                    v-model="form.isLongTerm">长期</el-checkbox>
                </el-col>
              </el-row>
            </el-col>
          </el-form-item>
        </el-row>

        <el-divider content-position="left">场景</el-divider>
        <el-row>
          <el-col :span="12">
            <el-form-item label="交易场景" prop="tradingScenarios">
              <el-select @change="$forceUpdate()" filterable v-model="form.tradingScenarios" placeholder="请选择交易场景"
                clearable style="width: 100%">
                <el-option label="App" value="App" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11" v-show="form.tradingScenarios === 'App'">
            <el-form-item label="App名称	" prop="appName">
              <el-input v-model="form.appName" :maxlength="80" placeholder="请输入App名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label-width="120px" label="APP首页截图" prop="appImg" v-show="form.tradingScenarios === 'App'">
          <PayEaseFileUpload :isShowTip="false" @input="handUploadImg" keys="appPath" :path="form.appPath" :limit="1"
            v-model="form.appImg"></PayEaseFileUpload>
        </el-form-item>


        <el-divider content-position="left">最终受益人信息</el-divider>
        <div class="certificateContacts">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddTab">添加</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteTab">删除</el-button>
            </el-col>
          </el-row>
          <el-table :data="form.certificateContacts" :row-class-name="rowTabIndex"
            @selection-change="handleAddTabSelectionChange" ref="table">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column label="收益人姓名" prop="name" align="center" width="150">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="'certificateContacts.' + scope.$index + '.name'" :rules="{
                  required: true,
                  message: '名称不能为空',
                  trigger: 'blur',
                }">
                  <el-input v-model="scope.row.name" :maxlength="50" placeholder="请输入收益人姓名" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="证件类型" prop="idType" align="center" width="160">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="'certificateContacts.' + scope.$index + '.idType'" :rules="{
                  required: true,
                  message: '请选择证件类型',
                  trigger: 'change',
                }">
                  <el-select @change="$forceUpdate()" v-model="scope.row.idType" placeholder="请选择证件类型" clearable>
                    <el-option label="身份证" value="IDCARD" />
                    <el-option label="护照" value="PASSPORT" />
                    <el-option label="军官证" value="OFFICERPASS" />
                    <el-option label="武警证" value="ARMEDPOLICE" />
                    <el-option label="港澳居民往来内地通行证" value="HM_VISITORPASS" />
                    <el-option label="户口簿" value="RESIDENCEBOOKLET" />
                    <el-option label="台湾居民来往大陆通行证" value="T_VISITORPASS" />
                    <el-option label="外国人永久居留证" value="FOREIGNESTAYFOREVER" />
                    <el-option label="其它证件号" value="OTHER" />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="受益人证件号码" prop="idNo" width="195" align="center">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="'certificateContacts.' + scope.$index + '.idNo'"
                  :rules="[{
                    required: true,
                    message: '受益人证件号码不能为空',
                    trigger: 'blur',
                  }, { pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[\dXx]$/, message: '受益人证件号码格式不正确', trigger: 'blur' }]">
                  <el-input v-model="scope.row.idNo" :maxlength="20" placeholder="请输入受益人证件号码" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="证件有效期开始日期" width="160" prop="effectiveDateStart" align="center">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="'certificateContacts.' + scope.$index + '.effectiveDateStart'"
                  :rules="{
                    required: true,
                    message: '请选择证件有效期开始日期',
                    trigger: 'change',
                  }">
                  <el-date-picker type="date" v-model="scope.row.effectiveDateStart" placeholder="请选择证件有效期开始日期"
                    format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="证件有效期结束日期" width="160" prop="effectiveDateEnd" align="center">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="'certificateContacts.' + scope.$index + '.effectiveDateEnd'"
                  :rules="{
                    required: true,
                    message: '请选择证件有效期结束日期',
                    trigger: 'change',
                  }">
                  <el-date-picker type="date" v-model="scope.row.effectiveDateEnd" placeholder="请选择证件有效期结束日期"
                    format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="受益人住址" align="center" prop="address">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="'certificateContacts.' + scope.$index + '.address'" :rules="{
                  required: true,
                  message: '受益人住址不能为空',
                  trigger: 'blur',
                }">
                  <el-input v-model="scope.row.address" :maxlength="200" placeholder="请输入受益人住址" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="股权占比" width="150" align="center" prop="equityRatio">
              <template slot-scope="scope">
                <el-form-item label-width="0" :prop="'certificateContacts.' + scope.$index + '.equityRatio'" :rules="{
                  required: true,
                  message: '股权占比不能为空',
                  trigger: 'blur',
                }">
                  <el-input-number :step="0.1" :min="0" :max="100" size="mini" :precision="2"
                    v-model="scope.row.equityRatio" placeholder="请输入股权占比" />
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>

        </div>

        <el-divider content-position="left">其他</el-divider>
        <el-form-item label-width="100px" label="上下游协议" prop="agreementImg">
          <PayEaseFileUpload @input="handUploadImg" keys="agreementPath" :path="form.agreementPath" :limit="10"
            v-model="form.agreementImg" />
        </el-form-item>
      </el-form>
      <div class="footer-operation">
        <el-button @click="initialization(); open = false">返回</el-button>
        <el-button :loading="loading" type="success" @click="submitForm" v-clickOnce>保存草稿</el-button>
        <el-button :loading="loading" type="primary" v-if="!!form.id" @click="submit" v-clickOnce>提交</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
// 图片上传组件
import PayEaseFileUpload from "@/components/payEaseFileUpload"
import {
  addPayEase,
  getCity,
  incoming,
  updatePayEase,
  payEaseClassificationList,
  payEaseCareerList,
  queryDetail
} from '@/api/ecs/payEase'
import { listShop } from "@/api/ecs/shop";
import { listPayEaseECertificateContacts } from '@/api/ecs/payEaseCertificateContacts'
import { ocrIdCard, ocrBankCard, ocrBusinessLicense } from '@/api/ecs/baiduOcr'

export default {
  name: "PayEaseOperate",
  props: {
    opens: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "蓝海银行"
    },
    formData: {
      type: Object,
      default: {}
    }
  },
  components: {
    PayEaseFileUpload
  },
  data() {
    return {
      open: false,
      form: {
        registerRole: null,
        accountType: null,
      },
      rules: {
        shopId: [
          { required: true, message: "请选择店铺账户", trigger: "change" }
        ],
        registerRole: [
          { required: true, message: "请选择商户类型", trigger: "change" }
        ],
        signedName: [
          { required: true, message: "营业执照全称不能为空", trigger: "blur" },
          { max: 80, message: '最大为 80 个字符', trigger: 'blur' }
        ],
        signedShorthand: [
          { required: true, message: "店铺平台店铺名全称不能为空", trigger: "blur" },
          { max: 20, message: '最大为 20 个字符', trigger: 'blur' }
        ],
        businessLicenseImg: [
          { required: true, message: "请上传营业执照", trigger: "change" }
        ],
        cerNo: [
          { required: true, message: "社会统一信用代码不能为空", trigger: "blur" }
        ],
        businessAddressProvince: [
          { required: true, message: "请选择经营地址省", trigger: "change" }
        ],
        businessAddressCity: [
          { required: true, message: "请选择经营地址市", trigger: "change" }
        ],
        businessAddressArea: [
          { required: true, message: "请选择经营地址区", trigger: "change" }
        ],
        businessAddress: [
          { required: true, message: "营业执照注册详细地址不能为空", trigger: "blur" }
        ],
        businessClassification: [
          { required: true, message: "请选择业务分类", trigger: "change" }
        ],
        accountType: [
          { required: true, message: "请选择结算类型", trigger: "change" }
        ],
        accountName: [
          { required: true, message: "开户人/企业名称不能为空", trigger: "blur" }
        ],
        bankName: [
          { required: true, message: "开户行名称不能为空", trigger: "blur" }
        ],
        bankBranchName: [
          { required: true, message: "支行名称不能为空", trigger: "blur" }
        ],
        bankCardNo: [
          { required: true, message: "银行卡号不能为空", trigger: "blur" }
        ],
        provinceCode: [
          { required: true, message: "请选择银行卡省份", trigger: "change" }
        ],
        cityCode: [
          { required: true, message: "请选择银行卡地市", trigger: "change" }
        ],
        legalIdCardProsImg: [
          { required: true, message: "请上传身份证正面", trigger: "change" }
        ],
        legalIdCardConsImg: [
          { required: true, message: "请上传身份证反面", trigger: "change" }
        ],
        holdingIdCardImg: [
          { required: true, message: "请上传手持身份证", trigger: "change" }
        ],
        legalPersonName: [
          { required: true, message: "法人姓名不能为空", trigger: "blur" }
        ],
        legalPersonPhone: [
          { required: true, message: "法人手机号不能为空", trigger: "blur" },
          { pattern: /^1[3-9]\d{9}$/, message: '法人手机号格式不正确', trigger: 'blur' }
        ],
        contactEmail: [
          { required: true, message: "联系人邮箱不能为空", trigger: "blur" },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        legalPersonIdNo: [
          { required: true, message: "法人身份证号不能为空", trigger: "blur" },
          { pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[\dXx]$/, message: '法人身份号格式不正确', trigger: 'blur' }
        ],
        idEffectiveDateStart: [
          { required: true, message: "请选择法人证件有效期开始日期", trigger: "change" }
        ],
        idEffectiveDateEnd: [
          { required: true, message: "请选择法人证件有效期结束日期", trigger: "change" }
        ],
        profession: [
          { required: true, message: "请选择法人职业", trigger: "change" }
        ],
        agreementImg: [
          { required: true, message: "请上传上下游的协议", trigger: "change" }
        ],
        tradingScenarios: [
          { required: true, message: "请选择交易场景说明", trigger: "change" }
        ],
        appName: [
          { required: true, message: "App名称不能为空", trigger: "blur" }
        ],
        appImg: [
          { required: true, message: "请上传APP首页截图", trigger: "change" }
        ],
        storeHeaderImg: [
          { required: true, message: "请上传门店门头照片路径", trigger: "change" }
        ],
        storeIndoorImg: [
          { required: true, message: "请上传店内场景照片", trigger: "change" }
        ],
        otherCerImg: [
          { required: true, message: "请上传其他资质文件", trigger: "change" }
        ],
        rate: [
          { required: true, message: "费率不能为空", trigger: "blur" }
        ],
        openAccountImg: [
          { required: true, message: "请上传开户许可证", trigger: "change" }
        ],
        legalPersonBankCardImg: [
          { required: true, message: "请上传法人银行卡照片", trigger: "change" }
        ],
        certificateContacts: [
          { required: true, message: "请先添加受益人信息", trigger: "change" }
        ],
      },
      isRefresh: false,
      shopList: [],
      cityCode: [],
      careerList: [],
      checkedTab: [],
      loading: false,
      classificationList: [],
      // certificateContacts:[],
      businessAddressArea: [],
      businessAddressCity: [],
      businessAddressProvince: [],
    }
  },
  created() {
    this.initialization()
    this.handleAddTab()
  },
  methods: {
    initialization() {
      this.form = {
        productId: 1,
        feeRate: 0,
        registerRole: null,
        signedName: null,
        signedShorthand: null,
        businessLicensePath: null,
        cerNo: null,
        businessAddressProvince: null,
        businessAddressCity: null,
        businessAddressArea: null,
        businessAddress: null,
        businessClassification: null,
        accountType: null,
        accountName: null,
        bankName: null,
        bankBranchName: null,
        bankCardNo: null,
        provinceCode: null,
        cityCode: null,
        bankProvince: null,
        bankCity: null,
        openAccountPath: null,
        legalPersonBankCardPath: null,
        legalIdCardProsPath: null,
        legalIdCardConsPath: null,
        holdingIdCardPath: null,
        legalPersonName: null,
        legalPersonPhone: null,
        contactEmail: null,
        legalPersonIdNo: null,
        idEffectiveDateStart: null,
        idEffectiveDateEnd: null,
        profession: null,
        isLongTerm: null,
        agreementPath: null,
        certificateContacts: [],
        tradingScenarios: null,
        appName: null,
        appPath: null,
        storeHeaderPath: null,
        storeIndoorPath: null,
        otherCerPath: null,
        rate: null,
        status: null,
        accountNumber: null,
        shopId: null
      }
    },
    handRegisterRoleChange(val) {
      if (val === "ENTERPRISE_LEGAL_PERSON") {
        this.$set(this.form, 'accountType', "PUBLIC"); //正确赋值
      } else if (val === "INDIVIDUAL_BUSINESS") {
        this.$set(this.form, 'accountType', null); //正确赋值
      }
    },
    rowTabIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    handleAddTabSelectionChange(selection) {
      this.checkedTab = selection.map(item => item.index)
    },
    handleAddTab() {
      this.form.certificateContacts.push({ "name": null, "idType": null, "dNo": null, "effectiveDateStart": null, "effectiveDateEnd": null, "address": null, "equityRatio": null });
    },
    handleDeleteTab() {
      if (this.checkedTab.length === 0) {
        this.$modal.msgError("请先选择要删除的最终受益人信息");
      } else {
        if (this.form.certificateContacts.length <= this.checkedTab.length) {
          this.$modal.msgError("最少需要保留一个最终受益人信息");
          return;
        }
        const certificateContacts = this.form.certificateContacts;
        const checkedTab = this.checkedTab;
        this.form.certificateContacts = certificateContacts.filter(function (item) {
          return checkedTab.indexOf(item.index) === -1
        });
      }
    },
    handLongTerm(val) {
      if (val === 1) {
        this.form.idEffectiveDateEnd = "2099-12-31"
      } else {
        this.form.idEffectiveDateEnd = ""
      }
    },
    toTimestamp(value) {
      return value ? Date.parse(value) : null;
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    },
    handBusinessAddressProvince(val) {
      if (val) {
        this.$set(this.form, 'businessAddressCity', null); //正确赋值
        this.$set(this.form, 'businessAddressProvinces', null); //正确赋值
        this.handBusinessAddressCity()
        this.loading = true

        this.businessAddressProvince.map(item => {
          if (item.code === val) {
            this.$set(this.form, 'businessAddressProvinces', item.name); //正确赋值
          }
        })

        getCity({ code: val }).then(res => {
          this.businessAddressCity = JSON.parse(res.data)
          this.loading = false
        })
      } else {
        this.businessAddressCity = []
      }
    },
    handBusinessAddressCity(val) {
      this.$set(this.form, 'businessAddressArea', null);
      this.$set(this.form, 'businessAddressCitys', null);
      if (val) {
        this.loading = true
        this.businessAddressCity.map(item => {
          if (item.code === val) {
            this.$set(this.form, 'businessAddressCitys', item.name);
          }
        })
        getCity({ code: val }).then(res => {
          this.businessAddressArea = JSON.parse(res.data)
          this.loading = false
        })
      } else {
        this.businessAddressArea = []
      }
    },

    handBusinessAddressArea(val) {
      this.$set(this.form, 'businessAddressAreas', null);
      if (val) {
        this.businessAddressArea.map(item => {
          if (item.code === val) {
            this.$set(this.form, 'businessAddressAreas', item.name);
          }
        })
      }
    },

    handProvinceCode(val) {
      this.$set(this.form, 'cityCode', null);
      this.$set(this.form, 'bankProvince', null);
      if (val) {
        this.loading = true
        this.businessAddressProvince.map(item => {
          if (item.code === val) {
            this.$set(this.form, 'bankProvince', item.name);
          }
        })
        getCity({ code: val }).then(res => {
          this.cityCode = JSON.parse(res.data)
          this.loading = false
        })
      } else {
        this.cityCode = []
      }
    },
    handCityCode(val) {
      this.$set(this.form, 'bankCity', null);
      if (val) {
        this.cityCode.map(item => {
          if (item.code === val) {
            this.$set(this.form, 'bankCity', item.name);
          }
        })
      }
    },
    handUploadImg(val1, val2, val3) {
      this.form[val2] = val3

      if (!val1) return
      switch (val2) {
        case 'businessLicensePath': // 营业执照
          ocrBusinessLicense({ url: val1 }).then((res) => {
            this.form.signedName = res.data.words_result?.单位名称?.words ?? this.form.signedName
            this.form.cerNo = res.data.words_result?.社会信用代码?.words ?? this.form.cerNo
            this.form.registerRole = ('个体工商户' == res.data.words_result?.类型?.words) ? 'INDIVIDUAL_BUSINESS' : 'ENTERPRISE_LEGAL_PERSON'
            this.form.accountType = ('INDIVIDUAL_BUSINESS' == this.form.registerRole) ? 'PRIVATE' : 'PUBLIC'
            this.form.businessAddress = res.data.words_result?.地址?.words ?? this.form.businessAddress
            const district = res.data.words_result?.证件编号?.words
            if (typeof district === 'string' && district.length > 6) {
              this.form.businessAddressProvince = district.substring(0, 2) + '0000'
              this.handBusinessAddressProvince(this.form.businessAddressProvince)
              this.form.businessAddressCity = district.substring(0, 4) + '00'
              this.handBusinessAddressCity(this.form.businessAddressCity)
              this.form.businessAddressArea = district.substring(0, 6)
              this.handBusinessAddressArea(this.form.businessAddressArea)
            }
          })
          break
        case 'legalPersonBankCardPath':// 法人银行卡照片
          if (this.form.registerRole == 'INDIVIDUAL_BUSINESS') { // 个体工商户
            ocrBankCard({ url: val1 }).then((res) => {
              if (res.code == 200 && res.data.result?.bank_card_type != 0) { //可以识别
                this.form.accountName = res.data.result?.holder_name
                this.form.bankName = res.data.result?.bank_name
                this.form.bankCardNo = res.data.result?.bank_card_number
              }
            })
          }
          break
        case 'legalIdCardProsPath': // 法人身份证人像面
          ocrIdCard({ url: val1, side: 'front' }).then((res) => {
            this.form.legalPersonName = res.data.words_result?.姓名?.words ?? this.form.legalPersonName
            this.form.legalPersonIdNo = res.data.words_result?.公民身份号码?.words ?? this.form.legalPersonIdNo
          })
          break
        case 'legalIdCardConsPath':// 法人身份证国徽面
          ocrIdCard({ url: val1, side: 'back' }).then((res) => {
            const dStart = res.data.words_result?.签发日期?.words
            if (/^\d{8}$/.test(dStart)) {
              this.form.idEffectiveDateStart = dStart.substring(0, 4) + '-' + dStart.substring(4, 6) + '-' + dStart.substring(6, 8)
            }
            const dEnd = res.data.words_result?.失效日期?.words
            if (/^\d{8}$/.test(dEnd)) {
              this.form.isLongTerm = 0
              this.form.idEffectiveDateEnd = dEnd.substring(0, 4) + '-' + dEnd.substring(4, 6) + '-' + dEnd.substring(6, 8)
            } else if (dEnd == '长期') {
              this.form.isLongTerm = 1
            }
          })
      }
    },
    submitForm() {
      if (this.form.businessClassification) {
        if (this.form.businessClassification.length === 2) {
          this.form.businessClassification = this.form.businessClassification[1]
        }
      }
      this.form.productId = 1
      if (this.form.id != null) {
        updatePayEase(this.form).then(response => {
          if (response.code === 200) {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.isRefresh = true
          } else {
            this.loading = false
          }
        }).catch(() => {
          this.loading = false
        });
      } else {
        addPayEase(this.form).then(response => {
          if (response.code === 200) {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            this.isRefresh = true
          } else {
            this.loading = false
          }
        }).catch(() => {
          this.loading = false
        });
      }
    },
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.certificateContacts.length === 0) {
            this.$modal.msgError("请填写最终受益人信息");
            return
          }
          this.loading = true
          if (this.form.businessClassification.length === 2) {
            this.form.businessClassification = this.form.businessClassification[1]
          }
          this.form.productId = 1
          incoming(this.form).then(res => {
            if (res.code === 200) {
              this.$modal.msgSuccess("提交成功");
              this.open = false;
              this.isRefresh = true
            } else {
              this.loading = false
            }
          }).catch(() => {
            this.loading = false
          })
        }
      });
    },
    query() {
      this.loading = true
      queryDetail(this.form.id).then(res => {
        if (res.code === 200) {
          this.form = res.data
          this.loading = false
        }
      }).catch(() => {
        this.loading = false
      })
    },
    createClose() {
      this.initialization()
      this.open = false
      this.$emit("close", false, this.isRefresh)
    }
  },
  watch: {
    opens: {
      handler(val) {
        this.open = val
        this.initialization()
        listShop({ page: 1, pageSize: 100000 }).then(res => {
          this.shopList = res.rows
        })
        getCity().then(res => {
          this.businessAddressProvince = JSON.parse(res.data)
        })
        payEaseCareerList().then(res => {
          this.careerList = res.data;
        })
        payEaseClassificationList().then(response => {
          this.classificationList = this.handleTree(response.data, "id", "parentId");
        })
      },
      deep: true,
      immediate: true
    },
    formData: {
      handler(val) {
        let data = { ...val }
        this.form = val
        if (val.id) {
          this.handBusinessAddressProvince(val.businessAddressProvince)
          this.form.businessAddressCity = data.businessAddressCity
          this.handBusinessAddressCity(data.businessAddressCity)
          this.form.businessAddressArea = data.businessAddressArea
          this.handBusinessAddressArea(data.businessAddressArea)

          this.handProvinceCode(val.provinceCode)
          this.form.cityCode = data.cityCode
          this.handCityCode(data.cityCode)
          listPayEaseECertificateContacts({ pay_ease_id: val.id }).then(res => {
            console.log(res)
            // this.form.certificateContacts = res.
          })
        }
      },
      // deep:true,
      immediate: true
    },
    title: {
      //   handle(val){
      //   },
      //   deep:true,
      //   immediate:true,
    }
  }
}
</script>



<style scoped lang="scss">
::v-deep .el-drawer__header {
  font-weight: 900;
  font-size: 18px;
}

.certificateContacts {
  padding: 0 20px;
}

::v-deep .el-date-editor.el-input {
  width: 100%;
}

::v-deep .el-checkbox__label {
  padding-left: 4px;
}

.form {
  padding-bottom: 80px;
}

.footer-operation {
  bottom: 0;
  width: 100%;
  height: 80px;
  display: flex;
  z-index: 10000;
  padding: 0 20px;
  text-align: center;
  position: absolute;
  align-items: center;
  background-color: #ffffff;
  border-top: 1px solid #EBEEF5;

  .el-button {
    width: 100%;
  }
}
</style>
